<template>
    <div class="person">
        <h2>姓名：{{ name_2 }}</h2>
        <h2>年龄：{{ age_2 }}</h2>
        <button @click="changeName">修改姓名</button>
        <button @click="changeAge">修改年龄</button>
    </div>
</template>

<script setup lang="ts" name="Persona">
    import { reactive, toRef, toRefs } from 'vue';

    let person = reactive({
        name: 'zzq',
        age: 28,
        position: 'PF'
    })

    let {name, age} = person        // 此时解构出来的 name 和 age 都不是响应式的
    let {name:name_2, age:age_2} = toRefs(person)    // 此时解构出来的 name_2 和 age_2 是响应式的
    // toRefs 将一个对象的每一项都转化为一个 ObjectRefImpl，并且此时每一项都和原来的 person 对象是关联起来的，两个地方会同时改变！！！！
    // ts 中，解构赋值是 {src:renamed}，而 python 则可以直接根据参数的位置来重命名

    console.log(name_2, age_2)


    let name_3 = toRef(person, 'name')      // toRef 也是实现刚才的功能，但是只能一个一个去操作，并且要用字符串显式地指出属性名


    function changeName(){
        person.name += '+'
    }
    function changeAge(){
        person.age++
        age_2.value++
        console.log(person.age, age_2.value)
    }
</script>

<style scoped>
.person {
    background-color: #d8a7af;
    border-radius: 10px;
    box-shadow: 0 0 10px;
    padding: 20px;
    margin: 10px 0;
}
</style>
